<!DOCTYPE html>
<html ng-app="myapp">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script src="script-tags-for-development.js"></script>
<script>
var app = angular.module('myapp', ['ngMap']);
app.controller('DrawingManagerCtrl', function() {
  var vm = this;
  vm.onMapOverlayCompleted = function(e){
    console.log(e.type);
  };
});
</script>
</head>
<body>
<div ng-controller="DrawingManagerCtrl as vm">
  <ng-map zoom="13" center="37.774546, -122.433523"
    map-type-id="ROADMAP"
    street-view-control-options="{position: 'LEFT_CENTER'}">
    <drawing-manager
      on-overlaycomplete="vm.onMapOverlayCompleted()"
      drawing-control-options="{position: 'TOP_CENTER',drawingModes:['polygon','rectangle','circle']}"
      drawingControl="true"
      drawingMode="null"
      markerOptions="{icon:'www.example.com/icon'}"
      rectangleOptions="{fillColor:'red'}"
      circleOptions="{fillColor: '#FFFF00',fillOpacity: 1,strokeWeight: 5,clickable: false,zIndex: 1,editable: true}" >
    </drawing-manager>
  </ng-map>
</div>
</body>
